import React, {Component} from 'react'
import {Upload, Icon, Modal} from 'antd'
import api from '../../../api'
const uploadButton = (
  <div>
    <Icon type={'plus'} />
    <div className='ant-upload-text'>Upload</div>
  </div>
)
class UploadComponent extends Component {
  constructor (props) {
    super(props)
    this.state = {
      startUpload: false,
      mediaCategory: '',
      mainList: [], // 显示图片的数据
      mainData: {}, // 给后台的数据
      previewVisible: false,
      lock: false
    }
    this.uploadReq = this.uploadReq.bind(this)
    this.handleCancel = this.handleCancel.bind(this)
    this.handlePreview = this.handlePreview.bind(this)
  }

  componentWillReceiveProps (nextProps) {
    let {mediaCategory, mainList} = nextProps
    this.setState({
      mediaCategory
    })
    if (mainList && mainList.length > 0) {
      this.setState({
        mainList
      })
    }
  }
  uploadReq (file, cb) {
    let formData = new window.FormData()
    formData.append('file', file)
    T.ajax({
      url: api.upload.path,
      data: formData,
      loading: true
    }).then((res) => {
      if (res.code === 0) {
        let data = res.data || ''
        cb && cb(data)
      }
    })
  }
  handlePreview (file) {
    console.log('file', file)
    this.setState({
      src: file.url,
      previewVisible: true
    })
  }
  handleCancel () {
    this.setState({ previewVisible: false })
  }
  getSrc (code) {
    let src = `/ajax/proxy/api/goods/file/downloadFile?fileUniqueCode=${code}`
    return src
  }

  render () {
    let {src, mediaCategory} = this.state
    let mainHandlers = {
      action: '/',
      accept: 'image/*',
      beforeUpload: (file) => {
        let fileSize = file.size / (1024 * 1024)
        if (fileSize > 2) {
          T.showError('文件最大为2M')
          return false
        }
        this.uploadReq(file, (data) => {
          let src = this.getSrc(data)
          this.setState({src})
          let listData = {
            uid: data,
            name: file.name,
            url: src
          }
          if (this.props.filterImgData) {
            this.props.filterImgData(mediaCategory, {
              mediaCategory,
              fileCode: data,
              fileName: file.name,
              uid: data,
              name: file.name,
              url: src
            })
          }
        })
        return false
      },
      onRemove: (file) => {
        this.props.removeImg(1, file, () => {
          this.setState({mainList: []})
        })
      }
    }
    let {mainList, previewVisible} = this.state
    return (
      <div className='upload-item'>
        <Upload
          {...mainHandlers}
          name='Main Cover'
          fileList={mainList}
          onPreview={this.handlePreview}
          listType='picture-card'
          className='main-uploader'>
          {mainList.length >= 1 ? null : uploadButton}
        </Upload>
        <Modal
          visible={previewVisible}
          footer={null}
          onCancel={this.handleCancel}>
          <img
            style={{ width: '100%' }}
            src={src} />
        </Modal>
      </div>
    )
  }
}
export default UploadComponent
